<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="str">
        <p>{{str}}</p>
        <p v-pre>大家好，你们现在学习的是Vue,可以借助插值表达式{{str}}输出数据状态str</p>
        <p v-once>str的初始值为：{{str}}</p>
    </div>
</body>
<script>
    // v-pre:为元素增加该指令后，该元素即被数据响应跳过。（不会对其元素进行解析）
    // v-once:只响应初始值，后续数据再次发生改变，使用该指令的元素不会对数据进行响应。
    new Vue({
        el: "#app",
        data: {
            str: "你现在过的还好吗？"
        }
    })
</script>
</html>